<template>
  <div>
    <p>click {{ count }} times,count is{{ evenOrOdd }}</p>
    <!--    <p>click {{ $store.state.count }} times,count is{{ evenOrOdd }}</p>-->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">incrementIfOdd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex'

export default {
  name: 'App',

  computed: {
    ...mapState(['count']),// mapState()返回值：{count(){return this.$store.state['count']}}
    ...mapGetters(['evenOrOdd'])
    /* evenOrOdd() {
       return this.$store.getters.evenOrOdd
     }*/
  },
  methods:{
    ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync'])
  }
  /*methods: {
    increment() {
      this.$store.dispatch('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    },
    incrementIfOdd() {
      this.$store.dispatch('incrementIfOdd')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }*/
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
